<template>
  <div>
    <slot name="customBtn"></slot>
    <a-upload
      name="file"
      :multiple="multiple"
      action="#"
      :accept="accept"
      :disabled="disabled"
      @change="handleChange"
      @preview="handlePreview"
      :file-list="fileList"
      :beforeUpload="beforeUpload"
      :showUploadList="showUploadList"
    >
      <a-button :disabled="disabled" v-if="!isCustomBtn"><a-icon type="upload" />点击上传</a-button>
      <slot></slot>
    </a-upload>
  </div>
</template>
<script>

  // import {makeId} from '@/utils'
  export default {
    name: 'UploadFile',
    data () {
      return {
        // BASE_URL,
        // headers: {
        //   'Content-Type':'multipart/form-data',
        //   'Auth-Token': window.localStorage.storetoken
        // },
        defaultFileList: [],
        fileList: [] // 格式[{url: "https://testsd.cicd.vpclub.cn/opo-mode/20210223/2021022315485363.jpg"}]
      }
    },
    props: {
      formKey: { // 表单项绑定的属性名，可用于当上传值发生变化时做回调处理
        type: String,
        required: false
      },
      value: String, // 表单值 格式 'xxx,xxxx'
      limit: { // 最大上传数量，默认为1就是单文件上传，0代表不限制
        type: Number,
        default: 1
      },
      disabled: { // 是否禁用
        type: Boolean,
        default: false
      },
      accept: { // 允许的文件格式
        type: String,
        default: ''
      },
      fileSizeLimit: { // 文件大小限制单位byte
        type: Number,
        default: 5242880
      },
      isCustomBtn: {
        type: Boolean,
        default: false
      },
      multiple: {
        type: Boolean,
        default: false
      },
      showUploadList: { // 是否展示上传文件列表，设置为false时可以自己在页面定义上传后文件的展示方式
        type: Boolean,
        default: true
      },
      isVideo: { // 是否是上传视频，上传视频可以预览
        type: Boolean,
        default: false
      }
    },
    watch: {
      value: {
        immediate: true,
        handler (value) {
          if (value && value.length) {
            this.fileList = value.split(',').map(item => ({
              name: item,
              url: item,
              // uid: makeId('upload-file'),
              status: 'done'
            }))
          } else {
            this.fileList = []
          }
        }
      }
    },
    methods: {
      handlePreview (file) {
        if (this.isVideo) {
          this.$info({
            title: '预览视频',
            okText: '关闭',
            closable: true,
            maskClosable: true,
            width: 'fit-content',
            content: <video src={file.name} controls autoplay style="max-width: 400px; max-height: 400px" />
        })
        } else {
          window.open(file.name)
        }
      },
      beforeUpload (file, fileList) {
        // console.log('beforeUploadfile-----', file)
        // console.log('beforeUploadfileList-----', fileList)
        return new Promise((resolve, reject) => {
          const suffix = file.name.substring(file.name.lastIndexOf('.')).toLowerCase()
          if (this.fileSizeLimit && file.size > this.fileSizeLimit) {
            this.$message.warning(`文件大小超出${(this.fileSizeLimit / 1024 / 1024).toFixed(1)}M限制！`)
            reject()
          } else if (this.accept && this.accept.toLowerCase().split(',').indexOf(suffix) === -1) {
            this.$message.warning(`仅支持上传${this.accept}格式的文件！`)
            reject()
          } else {
            resolve()
          }
        })
      },
      handleChange ({ file, fileList, e }) {
        // console.log('file-----', file)
        // console.log('fileList-----', fileList)
        if (file.status === 'done' || file.status === 'removed') {
          // 上传接口返回失败
          if (file && file.response && file.response.returnCode !== 1000) {
            this.fileList = fileList.filter(item => item.uid !== file.uid)
            this.$message.error(file.response.message)
            return
          }

          if (this.limit && fileList.length >= this.limit) {
            fileList.splice(0, fileList.length - this.limit)
          }
          const result = fileList.filter(item => item.status === 'done').map(item => {
            if (item.response && item.response.dataInfo && item.response.dataInfo.url) {
              return item.response.dataInfo.url
            }
            return item.name
          }).filter(item => item).join(',')
          this.$emit('change', result)
          this.$emit('input', result)
        }
        if (file.status === 'error') {
          this.$message.error('上传发生错误，请稍后重试！')
          fileList = fileList.filter(item => item.status === 'done')
        }
        this.fileList = fileList
      }
    }
  }
</script>
<style lang="scss" scoped>

</style>
